<script setup lang="ts">
import type { VxeGridProps } from 'vxe-table'

import { useGetProductLogPage } from '@fl/api/supplier'
import { SearchTable } from '@fl/components'

import { PRODUCT_LOG_TYPE } from './constant'

const route = useRoute()
const router = useRouter()

const selectTypeValue = ref<string>('')
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const getProductLogPageParams = computed(() => ({
    pageNum: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    productId: route.params.id as string,
    type: selectTypeValue.value,
}))

const { data: productLogPageData, isLoading: isGetProductLogPageLoading, total: productLogTotal } = useGetProductLogPage(getProductLogPageParams)

// #region Table
const isTableLoading = computed(() => isGetProductLogPageLoading.value)

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'operationName', title: '操作名称' },
        { field: 'operationResult', title: '操作结果' },
        { field: 'remark', title: '备注' },
        { field: 'createTime', title: '操作时间' },
        { field: 'operationCompany', title: '操作公司' },
        { field: 'createBy', title: '操作人' },
    ],
})

watchEffect(() => {
    tablePage.total = productLogTotal.value
})
// #endregion

// #region UI Listener
function onBackBtnClick() {
    router.back()
}

function onTypeChange(_value: any) {
    tablePage.currentPage = 1
}
// #endregion
</script>

<template>
    <el-card shadow="never">
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isTableLoading"
                     :data="productLogPageData"
        >
            <template #toolbar_buttons>
                <div class="mb-12 flex w-full justify-between">
                    <div>
                        <span class="inline-block w-[60px]">类型:</span>

                        <el-select v-model="selectTypeValue"
                                   class="!w-240"
                                   clearable
                                   @change="onTypeChange"
                        >
                            <el-option v-for="item in PRODUCT_LOG_TYPE"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
            </template>
        </SearchTable>

        <div class="mx-auto mt-20 flex justify-center">
            <el-button @click="onBackBtnClick">
                返回
            </el-button>
        </div>
    </el-card>
</template>
